<template>
	<div
		class="home-wallet min-w-[150px] h-8 bg-[var(--color-primary)] rounded-[16px] flex items-center pr-1 cursor-pointer"
		@click="walletStore.validateNavigation()">
		<base-currency class="size-8 aspect-square" :currency="currency" />
		<div v-if="!appStore.gaming" class="px-[10px] flex-1 text-center text-white">
			<base-number-animation v-if="numberAnimate" :to="walletStore.balance" />
			<up-amount v-else hideCurrency :value="walletStore.balance" />
		</div>
		<div class="px-[10px] flex-1 text-center text-white" v-else>
			{{ $t('tip.gaming') }}
		</div>
		<div class="bg-white h-[24px] aspect-square rounded-lg flex items-center justify-center">
			<base-icon class="text-[20px] leading-none text-[var(--color-primary)]" name="wallet1" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { useAppStore, useWalletStore } from '@/store'
import { BaseCurrency, BaseIcon, BaseNumberAnimation } from '@/components/base'
import { UpAmount } from '@/components/up'

const walletStore = useWalletStore()
const appStore = useAppStore()
// const profileStore = useProfileStore()

const currency = computed(() => appStore.currency)

const numberAnimate = ref(true)

const toBalance = ref(walletStore.balance)

watch(
	() => walletStore.balance,
	(curr, prev) => {
		toBalance.value = curr
		numberAnimate.value = curr !== prev
	}
)
</script>
<style lang="scss" scoped></style>
